<template>
  <div id="codeEditor" class="codeEditor"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { EditorState } from "@codemirror/state"
import { EditorView, keymap, ViewUpdate,highlightActiveLine ,drawSelection } from "@codemirror/view"
import {defaultTabBinding,defaultKeymap} from "@codemirror/commands"
// import { lineNumbers } from "@codemirror/gutter"
// import { defaultTabBinding,standardKeymap } from "@codemirror/commands"
import { markdown } from '@codemirror/lang-markdown';
import { defaultHighlightStyle, classHighlightStyle } from '@codemirror/highlight';
import { MyTheme } from './codemirror/MyTheme';
// import { oneDark } from '@codemirror/theme-one-dark'
import { javascriptLanguage } from '@codemirror/lang-javascript';
// import { webkit } from './codemirror/webkit';
// import { basicSetup } from '@codemirror/basic-setup';
import useEditorOnchange from '../hooks/useEditorOnchange';
import { history, historyKeymap } from '@codemirror/history';
import { insertNewlineContinueList, spaceTabBinding } from './commands';
import { listTask } from './listTask';
import { phraseEmphasis } from './phraseEmphasis';
import { heading, headingRE } from './heading';
import { link } from './link';
import { blockquote } from './blockquote';
import { codeblock } from './codeblock';
import { hr } from './hr';
import { webkitPlugins } from './webkit';
import { docSize } from './docSizePlugin'
export default defineComponent({
  name: 'MkEitor1',
  emits:['change'],
  setup(props,{emit}) {
    let state = EditorState.create({
      doc: 'hello',
      extensions: [
        MyTheme(),
        history(),
        // basicSetup,
        EditorView.lineWrapping,
        markdown({
          defaultCodeLanguage: javascriptLanguage,
          // Disable markdown keymaps.
          addKeymap: false,
        }),
        defaultHighlightStyle,
        classHighlightStyle,
        highlightActiveLine(),
        // EditorView.contentAttributes.of({ spellcheck: 'true' }),  // 拼写检查
        keymap.of([spaceTabBinding,insertNewlineContinueList,defaultTabBinding,...defaultKeymap,...historyKeymap]),
        EditorView.updateListener.of((v:ViewUpdate) => {
            if (v.docChanged) {
              // Document changed
              console.log("内容改变了")
              emit('change',v.state.doc.toString())
            }
        }) ,
        drawSelection(),
        listTask(),
        phraseEmphasis(),
        // //标题
        heading(),
        link(),
        //image(),
        blockquote(),
        codeblock(),
        hr(),

        webkitPlugins(),
        docSize()

      ],
    });
    onMounted(()=>{
      let view  = new EditorView({
        state,
        parent: document.querySelector("#codeEditor")!,
      });
      //view.focus();
        //   view.dispatch({
        //     changes: {from: 0, insert: "# 欢迎使用！"}
        //   })
      emit('change',view.state.doc.toString())
        //   useEditorOnchange(view,()=>{
        //     console.log("---你输入的内容如下---");
        //     //console.log(view.state.doc.toString());
        //     emit('change',view.state.doc.toString())
        //   }); 
    })
  }
})
</script>
<style>
.codeEditor {
  flex: 1;
}

</style>